<template>
  <div
    v-loading="getDetailLoading || getMaterialListLoading || getNetworkInfoLoading"
    class="out_storage_detail"
    element-loading-text="加载中..."
  >
    <div class="main">
      <header class="header">
        <div class="title">
          <div class="text">
            <i class="iconfont icon-detail"></i>
            调拨入库详情
          </div>
          <HStatus v-if="detail.status === 1" type="warning">待审核</HStatus>
          <HStatus v-if="detail.status === 2" type="warning">待入库</HStatus>
          <HStatus v-if="detail.status === 3" type="info">已驳回</HStatus>
          <HStatus v-if="detail.status === 4" type="success">已入库</HStatus>
          <HStatus v-if="detail.status === 5" type="info">已作废</HStatus>
          <HStatus v-if="detail.status === 6" type="warning">待签收</HStatus>
        </div>
        <!-- <div class="btn_group">
          <HPlainButton v-permission="'outb_print'" @click="printBtn">打印</HPlainButton>
          <template v-if="DetailStore?.status === 2">
            <HPlainButton v-permission="'outb_out'" @click="outboundBtn">出库</HPlainButton>
            <HPlainButton v-permission="'outb_cancel'" type="error" @click="cancellationBtn"
              >作废</HPlainButton
            >
          </template>
        </div> -->
        <div class="btn-group">
          <h-plain-button v-if="detail.status === 6" @click="signModalVisible = true"
            >签收</h-plain-button
          >
        </div>
      </header>

      <div class="divider_line"></div>

      <main class="body">
        <div class="out_storage_info">
          <div class="title">调拨入库信息</div>
          <div class="info_list">
            <div class="info_item">
              <div class="label">单据类型:</div>
              <div class="value">调拨入库</div>
            </div>
            <div class="info_item">
              <div class="label">单号:</div>
              <div class="value">{{ detail.outboundNo }}</div>
            </div>
            <div class="info_item">
              <div class="label">调入部门:</div>
              <div class="value">{{ networkInfo.networkName }}</div>
            </div>
            <div class="info_item">
              <div class="label">调入仓:</div>
              <div class="value">{{ materialList[0] ? materialList[0].inStore : '' }}</div>
            </div>
            <div class="info_item">
              <div class="label">调出仓:</div>
              <div class="value">{{ materialList[0] ? materialList[0].store : '' }}</div>
            </div>
            <div class="info_item">
              <div class="label">收货人:</div>
              <div class="value">{{ detail.receiptName }}-{{ detail.receiptPhone }}</div>
            </div>
            <div class="info_item">
              <div class="label">收货地址:</div>
              <div class="value"
                >{{ detail.receiptProvince }} {{ detail.receiptCity }} {{ detail.receiptArea }}
                {{ detail.receiptAddress }}</div
              >
            </div>
            <div class="info_item">
              <div class="label">制单人:</div>
              <div class="value">{{ detail.createEmp }}</div>
            </div>
            <div class="info_item">
              <div class="label">制单时间:</div>
              <div class="value">{{ detail.createTime }}</div>
            </div>
            <div class="info_item">
              <div class="label">最后更新时间:</div>
              <div class="value">{{ detail.updateTime }}</div>
            </div>
          </div>
        </div>

        <!-- 物流信息 -->
        <div class="statistics-info">
          <div class="title">物流信息：</div>
          <div class="value">{{ detail.reviewRemark }}</div>
          <!-- <div class="info_list">
            <div class="info_item">
              <div class="label">:</div>
              <div class="value"></div>
            </div>
          </div> -->
        </div>

        <!-- 设备信息 -->
        <div class="product_info">
          <div class="title">物料信息</div>
          <div class="table">
            <el-table
              :border="true"
              :data="materialList"
              height="100%"
              show-summary
              :summary-method="getSummaries"
              resizable
              stripe
            >
              <!-- 序号 -->
              <el-table-column label="序号" fixed width="60" type="index" :align="'center'" />

              <!-- 调出仓 -->
              <el-table-column prop="store" show-overflow-tooltip label="调出仓" width="150" />

              <!-- 可用库存 -->
              <el-table-column prop="systemStock" show-overflow-tooltip label="可用库存" width="90">
                <template #header>
                  <span>可用库存</span>
                  <el-tooltip content="可用库存 = 即时库存 - 占用库存" placement="top">
                    <el-icon>
                      <QuestionFilled />
                    </el-icon>
                  </el-tooltip>
                </template>
                <template #default="{ row }">
                  <span>{{ row.systemStock }}</span>
                </template>
              </el-table-column>

              <!-- 调入仓 -->
              <el-table-column prop="inStore" show-overflow-tooltip label="调入仓" width="150" />

              <!-- 可用库存 -->
              <el-table-column
                prop="inStoreStock"
                show-overflow-tooltip
                label="可用库存"
                width="90"
              >
                <template #header>
                  <span style="color: #a8abb2">可用库存</span>
                  <el-tooltip content="可用库存 = 即时库存 - 占用库存" placement="top">
                    <el-icon>
                      <QuestionFilled />
                    </el-icon>
                  </el-tooltip>
                </template>
                <template #default="{ row }">
                  <span>{{ row.inStoreStock }}</span>
                </template>
              </el-table-column>

              <!-- 设备编号 -->
              <el-table-column
                prop="goodsCode"
                show-overflow-tooltip
                label="设备编号"
                width="150"
              />

              <!-- 设备名称 -->
              <el-table-column
                prop="goodsName"
                show-overflow-tooltip
                label="设备名称"
                width="200"
              />

              <!-- 规格 -->
              <el-table-column
                prop="goodsSpecName"
                show-overflow-tooltip
                label="规格"
                width="200"
              />

              <!-- 分类 -->
              <el-table-column
                prop="goodsType"
                show-overflow-tooltip
                label="分类"
                min-width="120"
              />

              <!-- 申请数量 -->
              <el-table-column prop="applyQty" show-overflow-tooltip label="申请数量" width="90" />

              <!-- 实发数量 -->
              <el-table-column prop="qty" show-overflow-tooltip label="实发数量" width="90" />

              <!-- 单位 -->
              <el-table-column prop="goodsUnit" show-overflow-tooltip label="单位" width="100" />

              <!-- 序列号 -->
              <el-table-column prop="stockCodeVos" label="序列号" width="160" show-overflow-tooltip>
                <template #default="i">
                  {{ i.row.stockCodeVos.map((item) => item.code).join('、') }}
                </template>
              </el-table-column>

              <!-- 备注 -->
              <el-table-column prop="remark" show-overflow-tooltip label="备注" width="100" />

              <!-- 紧急程度 -->
              <el-table-column prop="remark" show-overflow-tooltip label="紧急程度" width="100">
                <template #default="{ row }">
                  <template v-if="row.grade === 1">一般</template>
                  <template v-if="row.grade === 2">紧急</template>
                  <template v-if="row.grade === 3">特别紧急</template>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </main>
    </div>

    <sign-modal
      v-model="signModalVisible"
      :allot-in-warehouse-id-list="[detail.id]"
      @update="getDetail(detail.id)"
    />
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue'
  import { useRoute } from 'vue-router'
  import routeComponentName from '@/config/route-component-name'
  import { useGetAllotInWarehouseDetail } from '@/services/pages/storage/useWarehouse'
  import { useGetAllotInWarehouseMaterialList } from '@/services/pages/storage/useWarehouse'
  import { useGetNetworkInfoByWarehouseId } from '@/services/pages/network/useNetwork'
  import SignModal from '@/components/pages/Warehouse/allot/sign-modal.vue'
  import { QuestionFilled } from '@element-plus/icons-vue'

  defineOptions({
    name: routeComponentName.storage.warehouseAllotInDetail,
  })

  const { detail, getDetailLoading, getDetail } = useGetAllotInWarehouseDetail()
  const { networkInfo, getNetworkInfoLoading, getNetworkInfo } = useGetNetworkInfoByWarehouseId()
  const {
    materialList,
    getListLoading: getMaterialListLoading,
    getList: getMaterialList,
  } = useGetAllotInWarehouseMaterialList()
  const route = useRoute()

  // 签收弹窗显示状态
  const signModalVisible = ref(false)

  // 合计
  const getSummaries = (param) => {
    const { columns, data } = param
    const sums: string[] = []
    columns.forEach((column, index) => {
      if (index === 0) {
        sums[0] = '合计'
        return
      }

      if (column.property === 'qty') {
        let total = 0
        data.forEach((good) => {
          if (!good.isFixed) {
            total += Number(good.qty)
          }
        })
        sums[index] = String(total)
      }

      if (column.property === 'applyQty') {
        let total = 0
        data.forEach((good) => {
          if (!good.isFixed) {
            total += Number(good.applyQty)
          }
        })
        sums[index] = String(total)
      }
    })

    return sums
  }

  onMounted(async () => {
    if (route.params.id) {
      await getDetail(route.params.id as string)
      await getMaterialList(route.params.id as string)
      if (materialList.value[0] && materialList.value[0].inStoreId) {
        await getNetworkInfo(materialList.value[0].inStoreId)
      }
    }
  })
</script>

<style lang="scss" scoped>
  @import './detail';
</style>
